// 事件绑定指令
<template>
  <div class="test3">
    <h3>事件绑定指令</h3>
    <div>v-on演示：</div>
    <!-- v-on:事件绑定指令。为元素绑定事件监听 -->
    <!-- v-on:指令可简写为@ 所以实际开发中事件绑定指令都会用@ -->
    <!-- 当不需要传参时，可省略();当需要传参时，()不能省略 -->
    <p>count值为：{{ count }}</p>
    <button v-on:click="addOne">加1</button>
    <button @click="subtract(2)">减2</button>
    <hr />

    <div>事件对象演示：</div>
    <!-- 当开发者不传参且省略()时，事件的参数中会默认带DOM的事件对象e -->
    <button @click="testOne">默认不传参事件</button>
    <!-- 当开发者传参时，可利用vue的内置变量$event，在事件中接收DOM的事件对象e -->
    <button @click="testTwo($event, '1')">传参事件</button>
    <hr />

    <div>事件修饰符演示：</div>
    <!-- 事件修饰符：在事件绑定指令后面添加事件修饰符可方便的实现对应效果 -->
    <a href="https://www.baidu.com/">打开百度</a>
    <hr />
    <a href="https://www.baidu.com/" @click.prevent="preventEvent">阻止打开</a>
    <hr />
    <div style="height: 50px; background: green" @click="divClick">
      <button @click="normalBtnClick">未阻止事件冒泡</button>
      <button @click.stop="stopBtnClick">阻止事件冒泡</button>
    </div>
    <hr />

    <div>按键修饰符演示：</div>
    <!-- 按键修饰符：在@keyup、@keydown后面添加按键修饰符用来监听键盘按下、抬起对应键的事件 -->
    <!-- 例如：.space、.esc、.tab、.enter等等 -->
    <input type="text" placeholder="请输入姓名" />
    <hr />
    <textarea
      name="a"
      id="1"
      cols="30"
      rows="5"
      placeholder="请输入详情数据"
      @keydown.space="ss"
      @keydown.esc="clearText"
      @keydown.tab.prevent="tabDown"
    >
    </textarea>
    <hr />
    <input type="text" placeholder="请输入时间" @keydown.enter="sumbit" />
    <hr />
  </div>
</template>

<style lang="scss">
.test3 {
  color: black;
  h3 {
    color: red;
  }
  div {
    color: blue;
  }
}
</style>

<script>
export default {
  name: "Test3",
  // data对象是要渲染到页面上的数据
  data() {
    return {
      count: 0,
    };
  },
  // methods：定义事件的处理函数
  methods: {
    addOne() {
      this.count += 1;
    },
    subtract(n) {
      this.count -= n;
    },
    testOne(e) {
      console.log("event===>", e);
      console.log("target===>", e.target);
    },
    testTwo(e, name) {
      console.log("event===>", e);
      console.log("name===>", name);
    },
    preventEvent() {
      console.log("阻止默认行为");
    },
    divClick() {
      console.log("div被点击");
    },
    normalBtnClick() {
      console.log("未阻止事件冒泡");
    },
    stopBtnClick() {
      console.log("阻止事件冒泡");
    },
    clearText(e) {
      e.target.value = "";
    },
    tabDown(e) {
      const escTab = "\t";
      const textareaEl = e.target;
      const startPosition = textareaEl.selectionStart;
      const endPosition = textareaEl.selectionEnd;
      if (startPosition === undefined || endPosition === undefined) return;
      const text = textareaEl.value;
      const result =
        text.substring(0, startPosition) + escTab + text.substring(endPosition);
      textareaEl.value = result;
      textareaEl.focus();
      textareaEl.selectionStart = startPosition + escTab.length;
      textareaEl.selectionEnd = startPosition + escTab.length;
    },
    sumbit() {
      console.log("发送请求");
    },
  },
};
</script>
